<template>
  <view>
    <view class="detail-base-info">
      <view v-for="(baseInfo, index) in listData" class="section">
        <template>
          <view>
            <view class="section-title">
              <text class="icon" />
              <text class="text">
                {{ '附件 ' + (index + 1) }}
              </text>
            </view>
            <view v-for="(item, index) in baseInfo" class="section-body">
              <base-info-item
                :key="index"
                :field="item"
                :detail-data="detailData" />
            </view>
          </view>
        </template>
      </view>
      
      <view style="padding: 10px;">
        <!-- 值为3是报价中 -->
        <button v-if="state == 3" type="primary" @click="showUploadModal">
          上传附件
        </button>
        <!-- <uni-file-picker
	      v-model="files"
	      :auto-upload="false"
	      file-mediatype="all" 
	      file-extname="dot,doc,xls,xlsx,docx,pdf"
	      mode="grid" 
	      :limit="1"
	      @select="uploadAfterSelect" 
	    /> -->
      </view>
      </scroll-view>
    </view>
    <!-- 添加弹窗组件 -->
    <uni-popup ref="popup" type="dialog" :mask-click="false">
      <uni-popup-dialog
        type="info"
        title="上传附件"
        content=""
        :before-close="true"
        @confirm="confirmUpload"
        @close="cancelUpload"
      >
        <uni-forms ref="form" :model-value="form" style="width: 95%;" :rules="rules">
          <uni-forms-item name="fileName" :required="true" label-width="0">
            <uni-easyinput v-model="form.fileName" type="text" placeholder="请输入文件名" />
          </uni-forms-item>
          <uni-forms-item name="fileName" :required="true" label-width="0">
            <uni-easyinput v-model="form.filePath" disabled type="text" placeholder="请上传文件" />
            <uni-file-picker
              v-model="files"
              :auto-upload="false"
              file-mediatype="all" 
              file-extname="jpg,png"
              mode="grid" 
              :limit="1"
              @select="uploadAfterSelect" 
            />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import BaseInfoItem from './baseInfoItem'
  import {querySrmXjOrderFileListByOrderId, addSrmXjOrderFile} from 'API/inqueryMessage'
  import { commonUploadOneAfterSelect } from '@/utils/file.js'

  export default {
    name: 'AttachFile',
    components: {
      BaseInfoItem
    },
    props: {
      detailId: {
        type: [String, Number],
        required: true
      },
      state: {
        type: Number,
        required: true
      },
      detailData: {
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        rules: {
          fileName: {
            rules: [{
              required: true,
              errorMessage: '请输入文件名',
            }]
          },
          filePath: {
            rules: [{
              required: true,
              errorMessage: '请选择要上传的文件',
            }]
          }
        },
        form: {
          fileName: undefined,
          filePath: undefined,
        },
        pageHeight: 0,
        files: [],
        baseInfo: [],
        listData: [],
        showBaseInfo: true,
        // showUploadModal: false, // 添加弹窗显示控制逻辑
        fileName: '' // 添加文件名输入框绑定
      }
    },
    wkActivated() {
      this.showBaseInfo = false
      this.$nextTick(function() {
        this.showBaseInfo = true
      })
    },
    mounted() {
      this.getFieldList()
      // 监听窗口大小的变化
      uni.onWindowResize((res) => {
        console.log('ressss', res)
        this.pageHeight = res.size.windowHeight;
      });
    },
    methods: {
      uploadAfterSelect(res) {
        let success = (uploadResult) => {
          if (uploadResult.data != undefined) {
            let uploadResultData = JSON.parse(uploadResult.data)
            this.form.filePath = uploadResultData.data.url
          }
        }
        let err = (err) => {
          console.log(err)
        }
        commonUploadOneAfterSelect(res, success, err, this.filePath)
        // uploadResult.then(res => {
        // 	console.log("promiseRes",res)
        // })
        // console.log("uploadResult",uploadResult)
      },
      showUploadModal() {
        this.$refs.popup.open('center')
      },
      /**
       * 获取自定义字段信息
       */
      getFieldList() {
        querySrmXjOrderFileListByOrderId({
          orderId: this.detailId
        }).then(res => {
          this.listData = []
          if (res.data != undefined && res.data instanceof Array) {
            res.data.forEach((item, index) => {
              let temps = item.fileUrl ? item.fileUrl.split('.') : []
              let ext = ''
              if (temps.length > 0) {
                ext = temps[temps.length - 1].toLowerCase()
              } else {
                ext = ''
              }
              this.listData.push(
                [{
                   name: '附件类型',
                   value: item.fileType == 1 ? '供应商上传' : '采购方',
                   formType: 'info'
                 },
                 {
                   name: '上传的供应商',
                   value: item.gysBasicInfoName,
                   formType: 'info'
                 },
                 {
                   name: '附件',
                   value: [{
                     name: item.fileName + '.' + ext,
                     url: item.fileUrl
                   }],
                   formType: 'file'
                 }]
              )
            })
          }
        })
      },
      confirmUpload() {
        this.$refs.form.validate().then(res => {
          console.log('validRes', res)
          addSrmXjOrderFile({
            fileName: this.form.fileName,
            fileUrl: this.form.filePath,
            orderId: this.detailId
          }).then(res => {
            console.log('res', res)
            this.$refs.popup.close()
            this.getFieldList()
          })
        }).catch(err => {
          this.$toast('请正确填写表单信息')
        })
        // 添加弹窗确认按钮事件
      },
      cancelUpload() {
        // 添加弹窗取消按钮事件
        // this.showUploadModal = false;
        this.$refs.popup.close()
        this.form = {
          fileName: undefined,
          filePath: undefined,
        }
      }
    }
  }
</script>

<style scoped lang="scss">
	.input-with-border {
	  border: 1px solid #ccc;
	  padding: 5px;
	  border-radius: 4px;
	  height: 40px;
	}
.detail-base-info {
  .section {
    width: 100%;
    background-color: white;
    padding: 32rpx 0 20rpx;
    margin-bottom: 15rpx;
    &:first-child {
      border-radius: 18rpx 18rpx 0 0;
    }
    .section-title {
      padding: 0 25rpx;
      .icon {
        width: 15rpx;
        height: 15rpx;
        vertical-align: middle;
        background-color: #333333;
        border-radius: 50%;
        display: inline-block;
        margin-right: 15rpx;
      }
      .text {
        color: #212121;
        font-size: 28rpx;
      }
    }
    .section-body {
      // padding: 0 30rpx;
    }
  }
}
</style>
